<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTTP vs HTTPS：网络安全协议深度解析</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
        }
        .serif-font {
            font-family: 'Noto Serif SC', serif;
        }
        .gradient-bg {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        .text-gradient {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
        }
        .drop-cap::first-letter {
            float: left;
            font-size: 4rem;
            line-height: 3rem;
            padding-right: 0.5rem;
            margin-top: 0.5rem;
            font-weight: 700;
            color: #667eea;
        }
        .section-divider {
            position: relative;
            text-align: center;
            margin: 4rem 0;
        }
        .section-divider::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(to right, transparent, #e5e7eb, transparent);
        }
        .section-divider span {
            background: white;
            padding: 0 2rem;
            position: relative;
            color: #9ca3af;
            font-size: 0.875rem;
        }
        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-20px); }
            100% { transform: translateY(0px); }
        }
        .float-animation {
            animation: float 6s ease-in-out infinite;
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Hero Section -->
    <section class="gradient-bg text-white py-20 px-6">
        <div class="max-w-6xl mx-auto text-center">
            <div class="mb-8 float-animation">
                <i class="fas fa-shield-alt text-6xl opacity-80"></i>
            </div>
            <h1 class="text-5xl md:text-6xl font-bold mb-6 serif-font">
                HTTP vs HTTPS
            </h1>
            <p class="text-xl md:text-2xl opacity-90 max-w-3xl mx-auto leading-relaxed">
                从明文传输到加密通信，探索网络安全协议的演进之路
            </p>
        </div>
    </section>

    <!-- Main Content -->
    <main class="max-w-6xl mx-auto px-6 py-16">
        <!-- HTTP Section -->
        <section class="mb-16">
            <div class="flex items-center mb-8">
                <div class="bg-red-100 p-4 rounded-full mr-4">
                    <i class="fas fa-unlock text-red-600 text-2xl"></i>
                </div>
                <h2 class="text-3xl font-bold text-gray-800">HTTP协议：开放的大门</h2>
            </div>
            
            <div class="bg-white rounded-2xl shadow-lg p-8 card-hover">
                <p class="text-lg leading-relaxed text-gray-700 mb-6 drop-cap">
                    HTTP协议也就是超文本传输协议，是一种使用明文数据传输的网络协议。一直以来HTTP协议都是最主流的网页协议，HTTP协议被用于在Web浏览器和网站服务器之间传递信息，以明文方式发送内容，不提供任何方式的数据加密，如果攻击者截取了Web浏览器和网站服务器之间的传输报文，就可以直接读懂其中的信息。
                </p>
                
                <div class="bg-red-50 border-l-4 border-red-500 p-6 rounded-r-lg mt-8">
                    <div class="flex items-start">
                        <i class="fas fa-exclamation-triangle text-red-500 text-xl mr-3 mt-1"></i>
                        <div>
                            <h3 class="font-bold text-red-800 mb-2">安全隐患警示</h3>
                            <p class="text-gray-700 leading-relaxed">
                                互联网发展到今天，HTTP协议的明文传输会让用户存在非常大的安全隐患。试想一下，假如你在一个HTTP协议的网站上面购物，你需要在页面上输入你的银行卡号和密码，然后你把数据提交到服务器实现购买。假如这个环节稍有不慎，你的传输数据被第三者给截获了，由于HTTP明文数据传输的原因，你的银行卡号和密码，将会被这个截获人所得到。
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Visual Comparison -->
        <div class="section-divider">
            <span><i class="fas fa-exchange-alt mr-2"></i>协议对比</span>
        </div>

        <section class="mb-16">
            <div class="grid md:grid-cols-2 gap-8">
                <div class="bg-white rounded-2xl shadow-lg p-8 border-t-4 border-red-500 card-hover">
                    <div class="text-center mb-6">
                        <i class="fas fa-times-circle text-red-500 text-5xl mb-4"></i>
                        <h3 class="text-2xl font-bold text-gray-800">HTTP 明文传输</h3>
                    </div>
                    <ul class="space-y-4">
                        <li class="flex items-start">
                            <i class="fas fa-chevron-right text-red-500 mt-1 mr-3"></i>
                            <span class="text-gray-700">数据以明文形式传输</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-chevron-right text-red-500 mt-1 mr-3"></i>
                            <span class="text-gray-700">容易被中间人攻击</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-chevron-right text-red-500 mt-1 mr-3"></i>
                            <span class="text-gray-700">无法验证服务器身份</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-chevron-right text-red-500 mt-1 mr-3"></i>
                            <span class="text-gray-700">默认端口：80</span>
                        </li>
                    </ul>
                </div>

                <div class="bg-white rounded-2xl shadow-lg p-8 border-t-4 border-green-500 card-hover">
                    <div class="text-center mb-6">
                        <i class="fas fa-check-circle text-green-500 text-5xl mb-4"></i>
                        <h3 class="text-2xl font-bold text-gray-800">HTTPS 加密传输</h3>
                    </div>
                    <ul class="space-y-4">
                        <li class="flex items-start">
                            <i class="fas fa-chevron-right text-green-500 mt-1 mr-3"></i>
                            <span class="text-gray-700">数据经过SSL/TLS加密</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-chevron-right text-green-500 mt-1 mr-3"></i>
                            <span class="text-gray-700">防止中间人攻击</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-chevron-right text-green-500 mt-1 mr-3"></i>
                            <span class="text-gray-700">通过证书验证服务器身份</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-chevron-right text-green-500 mt-1 mr-3"></i>
                            <span class="text-gray-700">默认端口：443</span>
                        </li>
                    </ul>
                </div>
            </div>
        </section>

        <!-- HTTPS Section -->
        <section class="mb-16">
            <div class="flex items-center mb-8">
                <div class="bg-green-100 p-4 rounded-full mr-4">
                    <i class="fas fa-lock text-green-600 text-2xl"></i>
                </div>
                <h2 class="text-3xl font-bold text-gray-800">HTTPS协议：安全的保障</h2>
            </div>
            
            <div class="bg-white rounded-2xl shadow-lg p-8 card-hover">
                <p class="text-lg leading-relaxed text-gray-700 mb-6">
                    为了解决HTTP协议的这一缺陷，需要使用另一种协议：安全套接字层超文本传输协议HTTPS，为了数据传输的安全，HTTPS在HTTP的基础上加入了SSL/TLS协议，SSL/TLS依靠证书来验证服务器的身份，并为浏览器和服务器之间的通信加密。
                </p>
                <p class="text-lg leading-relaxed text-gray-700 mb-6">
                    HTTPS协议可以理解为HTTP协议的升级，就是在HTTP的基础上增加了数据加密。在数据进行传输之前，对数据进行加密，然后再发送到服务器。这样，就算数据被第三者所截获，但是由于数据是加密的，所以你的个人信息仍然是安全的。这就是HTTP和HTTPS的最大区别。
                </p>
                
                <div class="bg-green-50 border-l-4 border-green-500 p-6 rounded-r-lg">
                    <div class="flex items-start">
                        <i class="fas fa-shield-check text-green-500 text-xl mr-3 mt-1"></i>
                        <div>
                            <h3 class="font-bold text-green-800 mb-2">行业标准</h3>
                            <p class="text-gray-700 leading-relaxed">
                                HTTPS协议是由SSL/TLS+HTTP协议构建的可进行加密传输、身份认证的网络协议，要比http协议安全，很多大型互联网网站，如百度、淘宝、腾讯很早就已经把HTTP换成HTTPS了。
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Data Visualization -->
        <div class="section-divider">
            <span><i class="fas fa-chart-line mr-2"></i>工作原理</span>
        </div>

        <section class="mb-16">
            <div class="bg-white rounded-2xl shadow-lg p-8">
                <h3 class="text-2xl font-bold text-gray-800 mb-6 text-center">HTTPS 握手过程</h3>
                <div class="mermaid">
                    sequenceDiagram
                        participant 客户端
                        participant 服务器
                        客户端->>服务器: 1. 发送支持的加密算法列表
                        服务器->>客户端: 2. 返回选定的加密算法和证书
                        客户端->>客户端: 3. 验证证书有效性
                        客户端->>服务器: 4. 生成随机密钥并用证书公钥加密发送
                        服务器->>服务器: 5. 用私钥解密获得随机密钥
                        客户端->>服务器: 6. 使用对称密钥加密通信
                        服务器->>客户端: 7. 使用对称密钥加密响应
                </div>
            </div>
        </section>

        <!-- SpringBoot Configuration -->
        <section class="mb-16">
            <div class="flex items-center mb-8">
                <div class="bg-purple-100 p-4 rounded-full mr-4">
                    <i class="fas fa-cog text-purple-600 text-2xl"></i>
                </div>
                <h2 class="text-3xl font-bold text-gray-800">SpringBoot配置HTTPS安全证书</h2>
            </div>
            
            <div class="bg-gradient-to-r from-purple-50 to-indigo-50 rounded-2xl p-8 border border-purple-200">
                <div class="flex items-center mb-4">
                    <i class="fas fa-book text-purple-600 text-xl mr-3"></i>
                    <p class="text-lg text-gray-700">
                        了解如何在SpringBoot项目中配置HTTPS安全证书，提升应用安全性。
                    </p>
                </div>
                <a href="https://www.yuque.com/diantostring/qiwsg9/vszdag?singleDoc#" 
                   target="_blank" 
                   class="inline-flex items-center mt-4 bg-purple-600 text-white px-6 py-3 rounde